<script setup lang="ts">
import MList from "@/components/MList.vue"
import {
    NIcon, NTag, NPopconfirm,
    NButton, type DataTableColumns, type DataTableRowKey
} from 'naive-ui';
import { type RowData } from 'naive-ui/es/data-table/src/interface';
import { ref, h, onMounted } from 'vue';

import { Edit, Delete } from "@vicons/carbon"

import { useFeature } from "~/common/mixins/";
let { LoadOne, DeleteOne } = useFeature()

import useTime from "~/utils/Time";
let { format } = useTime()



let columns = ref<DataTableColumns<RowData>>([
    {
        type: 'selection',
        disabled(row) {
            return (isAdmin(row.fdUsername) ? true : false)
        },
    },
    {
        title: "登录账号",
        key: "fdUsername"
    }, {
        title: "员工姓名",
        key: "fdFullname"
    }, {
        title: "员工电话",
        key: "fdPhone"
    }, {
        title: "用户组",
        key: "fdPhone"
    }, {
        title: "登录状态",
        key: "fdIsLogin",
        width: 90,
        render(rowData, _) {
            return h(NTag, { type: (rowData.fdIsLogin ? "success" : "error") }, rowData.fdIsLogin ? '已登录' : '未登录');
        }
    }, {
        title: "员工状态",
        key: "fdStatus",
        width: 90,
        render(rowData, _) {
            return h(NTag, { type: (rowData.fdStatus == 1 ? "success" : "error") }, "正常");
        }
    }, {
        title: "创建时间",
        key: "fdCreatedAt",
        fixed: 'right',
        render(rowData, _) {
            return format(rowData.fdCreatedAt)
        }
    }, {
        title: '操作',
        key: "action",
        fixed: 'right',
        render(rowData, _) {
            return [h(NButton, {
                disabled: (isAdmin(rowData.fdUsername) ? true : false),
                circle: true, renderIcon() {
                    return h(NIcon, {}, {
                        default: () => h(Edit)
                    });
                }, type: "primary", style: "margin-right:10px;", onClick(_) {
                    LoadOne(userStore, rowData.fdId).then(() => {
                        onShow(rowData)
                    })
                },
            }, ""), renderDeleteIcon(rowData)]
        }
    }
]);

let isAdmin = (username: string) => {
    return username === 'admin'
}

import { useMessage } from "naive-ui";
let message = useMessage();

const renderDeleteIcon = (row: any) => {
    let id = row.fdId;

    return h(NPopconfirm, {
        onPositiveClick: () => {
            DeleteOne(userStore, id).then(() => {
                message.success("删除成功");
                handleQuery()
            })
        },
        negativeText: '取消',
        positiveText: '删除'
    }, {

        trigger: () => h(NButton, {
            disabled: (isAdmin(row.fdUsername) ? true : false),
            circle: true, renderIcon() {
                return h(NIcon, {}, {
                    default: () => h(Delete)
                });
            }, type: "error"
        }, ""),
        default: "确认要删除这行数据？"
    })
}

import { useUserStore } from "@/store/";
let userStore = useUserStore()

let root = "user";

let handleQuery = () => {
    listRef.value?.handleQuery(userStore, root);
}

onMounted(() => {
    handleQuery();
})

import EditUser from "./component/editUser.vue";
let editUserRef = ref();
let listRef = ref();

function onShow(row: any) {
    editUserRef.value?.openDialog(row);
}

let isChecked = ref(false);
let _onHandleCheck = (rowkeys: DataTableRowKey[]) => {
    isChecked.value = rowkeys.length > 0
}

</script>

<template>
    <div class="mc_1">
        <MList ref="listRef" :title="'用户'" @on-handle-check="_onHandleCheck" @on-load="handleQuery"
            @on-show="onShow({ fdStatus: 1 })" :columns="columns">
            <template #extra_btn>
                <div class="extra_btn">
                    <n-button type="error" :disabled="!isChecked">批量删除</n-button>
                </div>
            </template>
        </MList>

        <EditUser ref="editUserRef" @handle-query="handleQuery"></EditUser>

    </div>


</template>

<style scoped>
.toolbar {
    padding: 10px 0 10px 10px;

    .n-button:first-child {
        margin-right: 10px;
    }
}
</style>
